<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="theme-color">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>分享家</title>
    <link rel="stylesheet" type="text/css" href="../lib/css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../lib/css/mui.css"/>
    <link rel="stylesheet" href="../css/util.css">
    <script src="http://at.alicdn.com/t/font_371407_7omis3wrfr7tx1or.js"></script>
</head>
<link rel="stylesheet" href="../css/my_credits.css">
<body>
<header class="fxj-header">
    <back></back>
    <h1 class="fxj-title">我的积分</h1>
</header>
<main id="main">
    <div class="line header">
        <span>当前积分<strong class="highlight" v-cloak v-text="point.total"></strong></span>
        <span class="tips" @click="togglePopup(true)">
            <svg class="icon">
                <use xlink:href="#icon-guanyuwomen-copy"></use>
            </svg>
            积分规则</span>
    </div>
    <div class="title">积分明细</div>
    <ul class="detail-list">
        <li class="line line-transverse" v-cloak v-for="indent of point.list">
            <div class="detail">
                <span class="detail-title" v-cloak>{{indent.remark}}</span>
                <span class="detail-date" v-cloak>{{indent.date.replace(/-/g, '.')}}(订单号:{{indent.order_id}})</span>
            </div>
            <div class="detail-price" :class="{green:Number(indent.income_spend)<0,red:Number(indent.income_spend)>=0}" v-text="indent.income_spend"></div>
        </li>
    </ul>

    <section id="popup" style="display: none;" v-show="show.credits" v-cloak>
        <div id="container-积分" class="container">
            <div class="content">
                <div class="title">积分使用规则</div>
                <div>使用范围</div>
                <p>在分享家短租平台预定房间在线支付订金</p>
                <div>使用条件</div>
                <ul>
                    <li>1.订单金额大于10元（含）；</li>
                    <li>2.积分大于100（含）；</li>
                    <li>3.积分抵扣不得超过每笔订单金额的50%；</li>
                    <li>4.100积分抵扣1元，只能使用积分整数倍。</li>
                </ul>
            </div>
            <div class="btn" @click="togglePopup(false)">我知道了</div>
        </div>
    </section>
</main>

<script type="text/javascript" src="../lib/js/babel-polyfill.js"></script>
<script type="text/javascript" src="../lib/js/vue.js"></script>
<script type="text/javascript" src="../lib/js/mui.js"></script>
<script type="text/javascript" src="../lib/js/jquery.js"></script>
<script type="text/javascript" src="../script/util.js"></script>

<script src="../script/my_credits.js"></script>
</body>
</html>